<template>
  <el-sub-menu
    v-if="node.children && node.children.length > 0"
    :index="node.path"
  >
    <template #title>
      <span>{{ node?.meta?.title }}</span>
    </template>
    <menu-node  v-for="(child,index)  in node.children" :node="child" :key="index" :index="child.path" @click="linkTo(child.path)"> </menu-node>
  </el-sub-menu>
  <el-menu-item v-else :index="node.path" @click="linkTo(node.path)">
    <span>{{ node?.meta?.title }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name:"menu-node",
  props: ["node"],
  methods: {
    linkTo(path) {
      this.$router.push({
        path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>